<template>
	<view class="content player-page page-background">
		<view v-if="list.length>0" class="player-list">
			<view @click="handleSelect(item)" v-for="(item, index) in list" :key="index" class="player-item flex-box item-box">
				<view class="left_wrap">
					<view class="left">
						<image v-if="item.icon" :src="item.icon" mode=""></image>
            <template>
              <image v-if="item.sex==2" :src="'@/static/images/mine/player-icon-gril-grey.png'|addBaseImgUrl" mode="">
			        </image>
			        <image v-else :src="'@/static/images/mine/player-icon-boy-grey.png'|addBaseImgUrl" mode=""></image>
            </template>
					</view>
					<view :class="item.sex=='1'?'icon m':'icon w'"></view>
				</view>
				<view class="middle">
					<view class="top">
						<text class="name">{{item.relName}}</text>
						<text v-if="item.isDefault==1" class="lit-tag icon_y">默认</text>
					</view>
					<view class="bottom mobile">
						{{item.mobile | phonestyle}}
					</view>
				</view>
				<view @click.stop="toDetail(item.id)" class="right">
					编辑
				</view>
			</view>
		</view>
		<xjx-nodata v-else-if="pageLoaded"></xjx-nodata>
		<view class="bottom-view">
			<view @click="toDetail('')" class="bottom-btn flex-box">
				<image :src="'@/static/images/icon-plus-circle.png'|addBaseImgUrl" mode=""></image>
				<text>新增球员</text>
			</view>
		</view>
		<van-dialog
			id="van-dialog"
			:show="dialogShow"
			use-slot
			confirm-button-color="#2D87FF"
			confirm-button-text="去登录"
			cancel-button-color="#999"
			cancel-button-text="取消"
			show-cancel-button
			class="refuse-dialog"
			@confirm="dialogConfirm"
			@cancel="dialogCancel"
			>
			<view class="refuse-dialog-wrap">
				<view class="title">
					请先登录，再添加球员哦！
				</view>
			</view>
		</van-dialog>
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup-view">
				<view @click="closePopup" class="popup-close">
					<image :src="'@/static/images/icon-close-grey.png'|addBaseImgUrl" mode=""></image>
				</view>
				<image class="popup-logo" :src="'@/static/images/logo-new.png'|addBaseImgUrl" mode=""></image>
				<view class="popup-tips">申请获得你微信绑定的手机号</view>
				<button class="popup-btn" open-type="getPhoneNumber" @getphonenumber="getWxPhoneNumber">获取手机号</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				selectedPlayer: null,
				pageLoaded: false,
				clubId: '',
				dialogShow: false,
				canIUseGetUserProfile: false,
				wxUserInfo: null,
				wxPhoneNumberInfo: null,
				popupShow: false,
				wxLoginCode: '',
				timer: '',
				getVipFlag: false,
				vipApprove: undefined
			};
		},
		onLoad(data) {
			this.select = data.select || null
			this.clubIds = data.clubIds || null
			if(data.clubId){
				this.clubId = data.clubId
				if (wx.getUserProfile) {
				  this.canIUseGetUserProfile = true
				}
				this.wxLogin()
			}
		},
		onShow() {
			this.init()
		},
		computed: {
			...mapState(['userInfo', 'accessToken']),
		},
		methods: {
			...mapMutations(['setStateAttr','loginOut']),
			async init() {
				this.pages = getCurrentPages()
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					clubId: this.clubIds?this.clubIds:''//俱乐部id
				}
				const res = await this.$api.queryPlayerListByUser(param)
				this.pageLoaded = true
				if (res && res.code == 200) {
					this.list = res.data
					if (this.select && this.select.length > 9) {
						if (this.list.length < 0){
							this.pages[this.pages.length - 2].$vm.setqydata(this.list, {})
						}else {
							let selectObj = this.list.filter((item) => {
								return item.id == this.select
							})[0]
							if (selectObj) {
								this.pages[this.pages.length - 2].$vm.setqydata(this.list, selectObj)
							} else {
								this.pages[this.pages.length - 2].$vm.setqydata(this.list, this.list[0])
							}
						}
					}
					if(this.list.length>0){
						this.getVipApprove()
					}
				}else if(res.code==401){
					this.dialogShow = true
				}
			},
			// 查询是否为当前俱乐部会员
			async getVipApprove(){
				if(!this.clubId){return false}
				if(this.getVipFlag){
					this.isToJoin()
				}else{
					const param = {
						'ACCESS-TOKEN': this.accessToken,
					}
					let res = await this.$api.getVipApprove(param, this.clubId)
					if(res && res.code == 200){
						this.getVipFlag = true
						this.vipApprove = res.data
						this.isToJoin()
					}
				}
			},
			isToJoin(){
				if(this.vipApprove==undefined){
					this.joinVip()
				}else{
					return false
				}
			},
			// 成为俱乐部会员
			async joinVip() {
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					clubId: this.clubId
				}
				let res = await this.$api.joinVip(param)
				if(res && res.code == 200){
					this.vipApprove = {
						isApprove: res.data
					}
				}
			},
			toDetail(id) {
				if(!this.accessToken){
					this.getUserProfile()
					return false
				}
				let url = '/personalCenter/myPlayer/detail/detail'
				if (id) {
					url += `?id=${id}`
				}
				if (this.select) {
					if (url.includes('?')) {
						url += '&select=1'
					} else {
						url += '?select=1'
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			handleSelect(item) {
				if (this.select) {
					this.pages[this.pages.length - 2].$vm.setqydata(this.list, item)
					uni.navigateBack({
						delta: 1
					})
				} else {
					return false
				}
			},
			
			// ------------------------俱乐部分享的H5连接进入未登录时--------------------------
			dialogConfirm(){
				this.dialogShow = false
				this.getUserProfile()
			},
			dialogCancel(){
				this.dialogShow = false
			},
			wxLogin(type){
				const _this = this
				uni.login({
					provider:'weixin',
					success(loginRes) {
						_this.wxLoginCode = loginRes.code
						_this.timer = setTimeout(()=>{
							_this.wxLogin()
							clearTimeout(_this.timer)
						},300000)
					},
					fail(err) {}
				})
			},
			getUserProfile(){
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
				  desc: '用于完善用户资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				  success: (res) => {
					this.wxUserInfo = res.userInfo
					this.popupShow = true
					this.$refs.popup.open()
				  }
				})
			},
			getWxPhoneNumber(e) {
				if(e.detail.iv){
					this.wxPhoneNumberInfo = e.detail
					clearTimeout(this.timer)
					this.loginApi()
					this.$refs.popup.close()
				}
			},
			async loginApi(){
				let param = {
					code: this.wxLoginCode,
					...this.wxUserInfo,
					encryptedData: this.wxPhoneNumberInfo.encryptedData,
					iv: this.wxPhoneNumberInfo.iv,
					clubId: this.clubId
				}
				const res = await this.$api.wxLogin(param)
				if(res && res.code==200){
					this.setStateAttr([{
						key: 'accessToken',
						val: res.data.token
					},{
						key: 'userInfo',
						val: res.data.user
					}])
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					uni.setStorageSync('accessToken', res.data.token)
					uni.setStorageSync('userInfo', JSON.stringify(res.data.user))
					this.init()
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.wxLogin()
				}
			}
		},
		filters:{
			phonestyle:function(phone){
				var number = phone; //手机号 这里必须写成字符串格式
				var test = /^(\d{3})(\d{1,4})(\d{1,4})$/ //这里是3个表达式，第一个表达式(\d{3})匹配的是3个数字，第二三都是1-4个数字 
				return number.replace( test , '$1 $2 $3' );//这个$1表示的是第一个表达式匹配到的字符，中间直接用空格分割
			},
		}
	}
</script>

<style scoped lang="scss">
	.player-page {
		min-height: 100vh;
		overflow: hidden;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.player-list {
			overflow: hidden;
			padding-bottom: 100rpx;
			.player-item {
				height: 170rpx;
				align-items: center;
				padding: 0 20rpx;
				.left_wrap{
					position: relative;
					width: 110rpx;
					height: 110rpx;
					margin-right: 20rpx;
				}
				.left {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #F2F2F2;
					flex: 0 0 auto;
					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
					}
					
				}
				.icon{
						width:38rpx;
						height:37rpx;
						position: absolute;
						right: 0;
						top:0;
						&.m{
							background:url($public-baseImgUrl+'icon_m.png') no-repeat;
							background-size: 100% 100%;
						}
						&.w{
							background:url($public-baseImgUrl+'icon_w.png') no-repeat;
							background-size: 100% 100%;
						}
					}

				.middle {
					flex: 1 0 auto;

					.name {
						font-size: 34rpx;
						color: $text-color;
						margin-right: 10rpx;
					}

					.mobile {
						color: $text-color-grey;
						font-size: 26rpx;
					}
				}

				.right {
					text-align: center;
					width: 185rpx;
					height: 72rpx;
					border: 2rpx solid #E7E7E7;
					color: $bg-color-blue1;
					font-size: 30rpx;
					line-height: 68rpx;
					border-radius: 36rpx;
				}
			}
		}
		
		.bottom-view{
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #FFF;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			.bottom-btn {
				justify-content: center;
				align-items: center;
				height: 88rpx;
				background-color: #FFFFFF;
				image {
					margin-right: 20rpx;
					width: 36rpx;
					height: 36rpx;
				}
			
				text {
					color: $public-color-blue1;
					font-size: 32rpx;
				}
			}
		}
	}
	.refuse-dialog{
		border-radius: 15rpx;
		.refuse-dialog-wrap{
			position: relative;
			.title{
				width: 100%;
				text-align: center;
				display: inline-block;
				padding: 35rpx 45rpx;
				font-size: 32rpx;
				color: #333;
			}
			.reason-list{
				padding: 0 45rpx;
				.reason-row{
					display: flex;
					box-sizing: border-box;
					justify-content: space-between;
					height: 110rpx;
					align-items: center;
					input{
						text-align: right;
					}
					.icon-check{
						
					}
				}
			}
		}
	}
	.popup-view{
		height: 485px;
		border-radius: 32rpx 32rpx 0 0;
		// padding-top: 245rpx;
		background-color: white;
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		padding-bottom: 120rpx;
		.popup-close{
			padding: 30rpx;
			position: absolute;
			right: 0;
			top: 0;
			image{
				width: 28rpx;
				height: 28rpx;
				vertical-align: middle;
			}
		}
		.popup-logo{
			width: 230rpx;
			height: 230rpx;
			margin: 0 auto;
		}
		.popup-tips{
			color: $text-color-grey;
			text-align: center;
			margin-top: 20rpx;
		}
		.popup-btn{
			position: absolute;
			width: 690rpx;
			left: 50%;
			bottom: 30rpx;
			margin-left: -345rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			text-align: center;
			background-color: $public-color-blue1;
			color: white;
			border: none;
			font-size: 30rpx;
			&:after{
				border: none;
			}
		}
	}
</style>
